<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{width: 800px; height: 800px; margin: 0 auto; position: relative;}
        .cont{width: 100%; height: 100%; overflow: hidden; scroll-behavior: smooth; scroll-snap-type:x mandatory;}
        .cont > div{width: 100%; height: 100%; display: flex;flex-direction: column; flex-wrap: nowrap; }
        .box-1{background: #ff0;}
        .box-2{background: rgb(183, 0, 255);}
        .box-3{background: rgb(255, 0, 183);}
        .box-4{background: rgb(255, 102, 0);}
        .box-5{background: rgb(255, 0, 208);}
        .dot{ display: flex; flex-direction: row;}
        .dot a{width: 10px; height: 10px; border-radius: 50%; display: block;}
        .dot a:visited{ color: red;}
    </style>
</head>
<body>
    <div class="box">
        <div class="cont">
            <div class="box-1" id="A"></div>
            <div class="box-2" id="B"></div>
            <div class="box-3" id="C"></div>
            <div class="box-4" id="D"></div>
            <div class="box-5" id="E"></div>
        </div>
        <div class="dot">
            <a href="#A">1</a>
            <a href="#B">2</a>
            <a href="#C">3</a>
            <a href="#D">4</a>
            <a href="#E">5</a>
        </div>
    </div>
</body>
</html>